<!--
 * @Description: 
 * @Author: Binggan
 * @Date: 2019-04-24 15:11:36
 * @LastEditors: Binggan
 * @LastEditTime: 2019-09-02 10:10:46
 -->
<template>
    <div class="content-wrap">
        <Divider orientation="left" class="title">个人信息编辑</Divider>
        <div class="personal">
            <Form ref="formUserInfo" :model="currentuser" :rules="ruleValidate" :label-width="80">
                <FormItem label="用户名称" prop="loginName">
                    <Input v-model="currentuser.loginName" disabled></Input>
                </FormItem>
                <FormItem label="姓名" prop="userName">
                    <Input v-model="currentuser.userName"></Input>
                </FormItem>
                <!-- <FormItem label="部门" prop="departmentId">
                    <Input v-model="currentuser.department.id" disabled></Input>
                </FormItem> -->
                <FormItem label="工号" prop="number">
                    <Input v-model="currentuser.number" disabled></Input>
                </FormItem>
                <FormItem label="电话">
                    <Input v-model="currentuser.tel"></Input>
                </FormItem>
                <FormItem label="性别">
                    <RadioGroup v-model="currentuser.sex">
                        <Radio :label="1">男</Radio>
                        <Radio :label="0">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="角色" prop="role">
                    <Select v-model="currentuser.role" disabled>
                            <Option v-for='(item,index) in roles' :key='index' :value="item.id">{{item.name}}</Option>
                    </Select>
                </FormItem>
            </Form>
              <div class="btn-group">
                  <Button type="primary" size="large" :loading="amendLoading" @click="amend" style="margin-left:80px">确认修改</Button>
              </div>
        </div>  
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    const validatePhoneNumber = (rule, value, callback) => {
      let reg = /^(((0\d{2,3}-)?\d{7,8})|(1[3456789]\d{9}))$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确格式的手机号或电话号"));
      } else {
        callback();
      }
    };
    return {
      currentuser: {
        id: "",
        number: "",
        loginName: "",
        userName: "",
        role: "",
        departmentId: "",
        sex: "",
        tel: "",
        email: "",
        department: {}
      },
      updateUserData: {},
      ruleValidate: {
        userName: [
          { required: true, message: "请输入姓名！", trigger: "blur" }
        ],
        tel: [
          { required: true, message: "请输入电话号码！", trigger: "blur" },
          { validator: validatePhoneNumber, trigger: "blur" }
        ]
      },
      amendLoading:false
    };
  },
  computed: {
    ...mapState(["roles"])
  },
  methods: {
    getUserInfo() {
      let userId = this.$store.state.user.id;
      this.$axios.get("/user/"+userId).then(res => {
        console.log(res);
        if(res.errorCode==1){
            this.currentuser=res.data[0];
        }
      });
    },
    amend() {
      this.$refs["formUserInfo"].validate(valid => {
        if (valid) {
          this.amendLoading=true;
          this.updateUserData = JSON.parse(JSON.stringify(this.currentuser));
          /* this.updateUserData["_index"] + "" &&
            delete this.updateUserData["_index"];
          this.updateUserData["_rowKey"] + "" &&
            delete this.updateUserData["_rowKey"]; */
          this.currentuser.department&&(this.updateUserData["department"] = this.currentuser["department"].id);
        //   delete this.updateUserData["departmentId"];
          console.log(JSON.stringify(this.updateUserData));
          this.$axios.put("/user/", this.updateUserData).then(res => {
            if (res.errorCode==1) {
              this.$Message.success("修改个人信息成功!");
              this.modal1 = false;
              this.$refs["formUserInfo"].resetFields();

              this.getUserInfo();
            }
            this.amendLoading=false;
          });
        } else {
          this.$Message.error("请检查无误后提交!");
          this.amendLoading=false;
        }
      });
    }
  },
  created() {
    this.getUserInfo();
  }
};
</script>
<style lang="scss" scoped>
.title{font-size: 22px;color:#5a5a5a}
.personal {
  width: 80%;
  margin: 20px auto;
  @media screen and (max-width: 1000px) {
    width: 80%;
  }
  @media screen and (min-width: 1200px) {
    width: 60%;
  }
}
  .ivu-radio-disabled .ivu-radio-inner{border-color: #2d8cf0 !important;}
</style>
